<script>

Vue.component('NumberAnimation', {
  props: {
    start: {
      default: 0,
    },
    
    end: {
      default: 0,
    },
    
    increment: {
      default: 1,
    },
    
    duration: {
      default: 5000,
    },
  },
  
  methods: {
    run() {
      let range = this.end - this.start,
          stepTime = Math.abs(Math.floor(this.duration / range));
      
      if ( this.end == this.start ) {
        this.increment = 0;
      } else if ( this.end > this.start ) {
        this.increment = this.increment;
      } else {
        this.increment = -this.increment;
      }
      
      let timer = setInterval(() => {
        this.start += this.increment;
        if ( this.start >= this.end ) {
          this.start = this.end;
          clearInterval(timer);
        }
      }, stepTime);
    },
  },
  
  mounted() {
    this.run();
  },
  
  template: `
    <div>{{ start }}</div>
  `
});

const app = new Vue({
  el: '#app',
  template: `
    <div>
      <NumberAnimation :end="1000" :increment="5"></NumberAnimation>
    </div>
  `
});
</script>

<template>
    <div id="app"></div>
</template>